{% extends 'base.html' %}

{% block title %}记录数据管理{% endblock %}


{#主空间#}
{% block container %}

{#    第一行，留空，上传按钮那些#}

    <div class="row">

{#    上传数据按钮 #}

    <div class="file-field input-field col s4">
      <div class="btn">
        <span>选择文件</span>
        <input type="file"  id="uploadfile" name="table">
      </div>


      <div class="file-path-wrapper">
        <input class="file-path validate"   type="text" placeholder="上传一个excel文件">
      </div>

    </div>



        <div class="input-field col s2">
            {#        选择年份#}
        <select id="year">
            <option value="2016" >2016</option>
            <option value="2017">2017</option>
        <option value="2018" selected>2018</option>
         <option value="2019">2019</option>
            <option value="2020">2020</option>
        </select>
            <label>test</label>
        </div>



    <div class="col s4"><a class="btn" id="upload" onclick="upload()">上传</a></div>




    </div>


{#  ----------------------------------------  表格 #}
    <div class="row">
    <div class="col s12">

{#        表格内容  ajax请求的内容填充到这里#}
        <table id="records">



        </table>

    </div>

    </div>



{#-----------------------预览信息界面  模态框----------------#}
{#bottom-sheet显示在底部#}
    <div class="modal bottom-sheet" id="modal_info">

    <div class="modal-content"></div>
    <h4>数据预览(随机10条) </h4>
        <div class="progress" id="progress_info" ><div class="indeterminate"></div></div>
{#responsive-table 设置在小屏幕时可以水平滑动#}
        <table id="previewtable" class="responsive-table highlight centered">


        </table>

    <div class="modal-footer">
         <a href="#!" class="modal-close waves-effect waves-green btn-flat">关闭</a>
    </div>
    </div>


{% endblock %}


{# 导入数据的界面 #}


{% block script %}
    <script type="text/javascript"  src="{{ url_for('static',filename='admin/admin.js') }}"></script>
{% endblock %}